<template>
	<view class="content-box">
		<image class="bg_top" src="/static/me/bg.png" mode="widthFix"></image>
		<image class="bg_bottom" src="/static/me/bg.png" mode="widthFix"></image>
		<image class="logo" src="/static/login_logo.png" mode=""></image>
		<view style="position: relative;height: 400rpx;">
			<view class="login-box card_form" :class="{active_card:loginType==0,lazy_card:loginType!=0}">
				<view class="lable">
					<image src="../../static/phone.png" mode=""></image>
					<view class="">
						输入账号
					</view>
				</view>
				<view class="value" style="margin-bottom: 60rpx;">
					<input type="number" v-model="account">
				</view>
				<view class="lable">
					<image src="../../static/password.png" mode=""></image>
					<view class="">
						输入密码
					</view>
				</view>
				<view class="value">
					<input type="text" v-model="password">
				</view>

			</view>
			<view class="login-box card_form" :class="{active_card:loginType==1,lazy_card:loginType!=1}">
				<view class="lable">
					<image src="../../static/phone.png" mode=""></image>
					<view class="">
						输入手机号
					</view>
				</view>
				<view class="value" style="margin-bottom: 60rpx;">
					<input type="number" v-model="phone">
				</view>
				<view class="lable">
					<image src="../../static/password.png" mode=""></image>
					<view class="">
						输入验证码
					</view>
				</view>
				<view class="value">
					<input type="text" style="width: calc(100% - 220rpx);" v-model="code">
					<view class="get-code" :class="{forbid:codeTime>0}" @click="getCode">
						{{codeTime>0?`${codeTime}s 后重新获取`:'获取验证码'}}
					</view>

				</view>

			</view>

		</view>
		<view class="cut-btn">
			<view class="" @click="loginType=loginType==1?0:1">
				{{loginType===1?'手机号登录':'验证码登录'}}
			</view>
		</view>

		<view class="login-btn" @click="submit">
			登录
		</view>
		<view class="join-btn" @click="goJoinDriver">
			加入我们
		</view>


		<view class="agreement" style="display: flex;align-items: center;">
			<u-checkbox-group placement="column" @change="change" labelSize="8">
				<u-checkbox activeColor="#FFCE4E" v-for="(item, index) in checkboxList" :key="index" :label="item.name"
					:name="item.name" :checked="agreement">
				</u-checkbox>
			</u-checkbox-group>
			<text style="white-space: nowrap;">
				同意
				<text style="padding: 0 10rpx;color: #FFCE4E;"  @click="$routeTo('/pages/me/settingUp/agreementDetails/agreementDetails?type=2')">《用户服务协议》</text>
				和
				<text style="padding: 0 10rpx;color: #FFCE4E;"  @click="$routeTo('/pages/me/settingUp/agreementDetails/agreementDetails?type=6')">《隐私保护政策》</text>
			</text>

		</view>

		<Loading />
	</view>
</template>

<script>
	import md5 from '@/util/md5.min.js'
	export default {
		data() {
			return {
				account: '',
				password: '',

				phone: '',
				code: '',
				checkboxList: [{
					name: '',
					disabled: false
				}],
				agreement: false,
				loginType: 0,

				codeTime: -1,
			}
		},
		methods: {
			change(e) {
				this.agreement = e.length !== 0
			},
			goJoinDriver() {
				uni.navigateTo({
					url: '/pages/joinDriver/joinDriver'
				})
			},
			getCode() {
				this.codeTime = 60
				this.$myRequest('/api/system/v1/sms/get', {
					mobile: this.phone,
					type: 2
				}, 'POST').then(res => {
					let time = setInterval(() => {
						if (this.codeTime < 0) return clearInterval(time)
						this.codeTime--
					}, 1000)
				})

			},
			submit() {
				let that = this
				if (!this.agreement) return uni.showToast({
					title: '请先同意并勾选协议',
					icon: 'none'
				});
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let data = {
							"account": that.account,
							"password": md5(that.password).toUpperCase(),
							"code": loginRes.code
						}
						let url = '/api/account/v1/password/login'

						//短信登录
						if (that.loginType == 1) {
							data = {
								"account": that.phone,
								"code": that.code,
								"openCode": loginRes.code
							}
							url = '/api/account/v1/sms/login'
						}
						that.$myRequest(url, data, 'POST').then(res => {
							uni.setStorageSync('token', res.data.token);
							uni.setStorageSync('userData', res.data);
							console.log('token', res.data.token)
							//是否完善店铺信息
							uni.switchTab({
								url: '/pages/me/me'
							})

						})
					}
				})

			},
		}
	}
</script>

<style lang="scss">
	.content-box {
		padding-top: 288rpx;

		.bg_top {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: -1;
		}

		.bg_bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			transform: rotateX(180deg);
			z-index: -1;
		}
	}

	.logo {
		width: 250rpx;
		height: 250rpx;
		margin: 0 auto;
		display: block;
		margin-bottom: 100rpx;
		animation: an_logo 1s ease-in-out infinite alternate;
		border-radius:60rpx;
	}
	
	@keyframes an_logo {
		from {
			box-shadow: 0rpx 0rpx 4rpx 0rpx #FF9472;
		}
		to {
			box-shadow: 0rpx 0rpx 46rpx 4rpx #FF9472;
		}
	}
	

	.login-box {
		margin: 0 26rpx;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		border-radius: 12rpx;

		.lable {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;

			image {
				width: 28rpx;
				height: 32rpx;
				margin-right: 14rpx;
			}
		}

		.value {
			background-color: #F3F3F3;
			height: 92rpx;
			display: flex;
			justify-content: center;
			border-radius: 46rpx;
			margin-top: 22rpx;
			align-items: center;

			input {
				width: calc(100% - 40rpx);
			}

			.get-code {
				min-width: 138rpx;
				padding: 0 20rpx;
				height: 60rpx;
				background: $theme-color;
				border-radius: 30rpx;
				text-align: center;
				font-size: 28rpx;
				line-height: 60rpx;
				color: #FFFFFF;
			}

			.forbid {
				filter: grayscale(100%);
			}
		}


	}

	.cut-btn {
		display: flex;
		justify-content: flex-end;
		font-size: 28rpx;
		color: #666666;
		margin-top: 16rpx;
		margin-right: 56rpx;
	}

	.card_form {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		transition: all .3s ease .3s;
		box-shadow: 0 0 0 rgba(112, 112, 112, 0);
		transform: translateZ(0) scale(.8);
		z-index: 1;
	}

	.active_card {

		transform: translateZ(10px) scale(1);
		z-index: 9;
	}

	.lazy_card {
		box-shadow: 0rpx 6rpx 12rpx rgba(112, 112, 112, 0.09);
		animation: an .8s;
		transform: translateZ(0) scale(.8);
		z-index: 1;
	}

	@keyframes an {
		0% {
			transform: translateX(0) translateZ(10px) scale(1) rotateZ(0);
			z-index: 9;
		}

		10% {
			transform: translateX(0) translateZ(10px) scale(.8) rotateZ(60deg);
			z-index: 9;
		}

		40% {
			transform: translateX(-80vw) translateZ(10px) scale(.8) rotateZ(120deg);
			z-index: 1;
		}

		80% {
			transform: translateX(0) translateZ(0) scale(.8) rotateZ(180deg);
			z-index: 1;
		}

		100% {
			transform: translateX(0) translateZ(0) scale(.8) rotateZ(180deg);
			z-index: 1;
		}
	}


	.login-btn {
		width: 638rpx;
		height: 92rpx;
		background: #FFCE4E;
		border-radius: 22rpx;
		text-align: center;
		font-size: 28rpx;
		line-height: 92rpx;
		color: #FFFFFF;
		margin: 86rpx auto 20rpx auto;
	}

	.join-btn {
		font-size: 28rpx;
		color: #FFCE4E;
		text-align: center;
	}

	.agreement {
		display: flex;
		justify-content: center;
		position: fixed;
		left: 50%;
		bottom: 100rpx;
		margin-top: 20rpx;
		transform: translateX(-50%);
		font-size: 24rpx;
	}
</style>